<template>

  <div class="main">
    <transition name="el-fade-in-linear">
      <div class="cover-title" v-show="cover">进入全屏模式</div>
    </transition>
    <div class="cover" @mouseover="setCover" @mouseout="cancelCover" @click="jump">
      <el-row class="header">
        <el-col :span="8">
          <dv-decoration-8 style="width:90%;height:50px;"/>
        </el-col>
        <el-col :span="8">
          <dv-decoration-5 style="width:100%;height:40px;margin-top: 30px"/>
        </el-col>
        <el-col :span="8">
          <dv-decoration-8 :reverse="true" style="width:90%;height:50px;float:right"/>
        </el-col>
        <div class="center-title ">互联网招聘实时监控</div>
      </el-row>
      <el-row class="middle">
        <el-col :span="7" class="middle-left">
          <dv-border-box-8>

          </dv-border-box-8>
        </el-col>
        <el-col :span="11" class="middle-center">
          <dv-border-box-12>
            <dv-loading></dv-loading>
          </dv-border-box-12>
        </el-col>
        <el-col :span="6" class="middle-right">
          <dv-border-box-8>

          </dv-border-box-8>
        </el-col>
      </el-row>
      <el-row class="footer">
        <dv-border-box-8>

        </dv-border-box-8>
      </el-row>
    </div>

  </div>

</template>

<script>
  import {mapGetters} from 'vuex'
  import screenfull from 'screenfull'
  import store from "../../store"

  export default {
    name: 'homepage',

    data() {
      return {
        cover: false
      }
    },
    methods: {

      //全屏激活与屏蔽
      init() {
        if (screenfull.enabled) {
          screenfull.on('change', this.change)
        }
      },
      destroy() {
        if (screenfull.enabled) {
          screenfull.off('change', this.change)
        }
      },

      //蒙层按钮
      setCover() {
        this.cover = true;

      },
      cancelCover() {
        this.cover = false;
      },
      jump() {
        //全屏
        screenfull.toggle();
        //跳转
        this.$router.push({name: 'new'})
      }


    },
    components: {},
    mounted() {
      this.init();
    },
    beforeDestroy() {
      this.destroy();
    },
    computed: {
      ...mapGetters([
        'socketMessage'
      ])
    },
    watch: {}
  }
</script>

<style lang="scss" scoped>
  .main {
    background-image: linear-gradient(rgba(34, 46, 62, 1), rgba(3, 5, 11, 0.5) 50%),
    url("../../assets/background/background.png");
    background-size: 100% 100%;
    -webkit-box-shadow: 0 0 3px #222E3E;
    box-shadow: 0 0 3px #222E3E;
    flex-direction: column;
    height: calc(100vh - 50px);

    .cover {
      height: 100%;
      width: 100%;
      transition: filter 0.3s ease-out;
    }

    .cover:hover {
      filter: blur(5px);
      transition: filter 0.3s cubic-bezier(0.4, 0, 1, 1);
      cursor: pointer;
    }

    .cover-title {
      position: absolute;
      height: 100%;
      width: 100%;
      line-height: calc(100vh - 50px);
      text-align: center;
      font-size: 40px;
      color: white;
      font-weight: lighter;
    }

    .header {
      height: 100px;

      .center-title {
        color: #fff;
        position: absolute;
        font-size: 3vh;
        font-weight: 700;
        left: 50%;
        top: 10px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
      }

    }

    .middle {
      height: 60%;

      .middle-left {
        height: 100%;

        .setting {
          height: 50px;
        }

        .data {
          height: 30%;
          min-height: 60px;
          color: white;

          .data-Container {
            display: flex;
            align-items: center;
            height: 100%;

            .data-box {
              display: flex;
              flex-direction: column;
              align-items: center;

              .b-title {
                margin-bottom: 1vh;
                font-size: 1.8vh;
              }
            }
          }
        }

        .chart {
          height: calc(70% - 50px);

          .bar-chart {
            height: 100%;

            .title {
              font-size: 18px;
              color: white;

              b {
                margin: 20px 0 10px 15px;
                display: inline-block;
              }
            }

            .content {
              height: calc(100% - 58px)
            }
          }

          .pie-chart {
            height: 100%;

            .title {
              font-size: 18px;
              color: white;

              b {
                margin: 20px 0 10px 15px;
                display: inline-block;
              }
            }

            .content {
              height: calc(100% - 58px)
            }
          }
        }
      }

      .middle-center {
        height: 100%;
      }

      .middle-right {
        height: 100%;

        .table {
          height: 60%;
          padding: 0 5px 5px 5px;
        }

        .chart {
          height: 40%;
        }
      }
    }

    .footer {
      height: calc(40% - 100px);

      .line-chart {
        height: 100%;
      }

      .chart-box {
        height: 100%;

        .chart-card {
          height: 100%;
          background-color: #09192C;
          background-clip: content-box;

          .title {
            font-size: 18px;
            color: white;

            b {
              margin: 10px 0 10px 10px;
              display: inline-block;
            }
          }

          .content {
            height: calc(100% - 38px)
          }
        }
      }

      .radar-chart {
        height: 100%;
      }

      .word-cloud {
        height: 100%;
      }
    }
  }

</style>
